<script setup lang="ts">
import { computed } from 'vue';
interface Props {
  name: string;
  color?: string;
  size?: {
    width: number;
    height: number;
  };
}

// 定义前缀
const prefix = 'icon';

const props = withDefaults(defineProps<Props>(), {
  color: '#2c2c2c',
  size: () => ({ width: 16, height: 16 }),
});

const symbolId = computed(() => `#${prefix}-${props.name}`);
</script>

<script lang="ts">
export default {
  name: 'SvgIcon',
};
</script>

<template>
  <svg
    aria-hidden="true"
    :style="{ width: size.width + 'px', height: size.height + 'px' }">
    <use :href="symbolId" :fill="color" />
  </svg>
</template>

<style scoped>
/* PC电脑端 */
@media screen and (max-width: 1024px) {
}
</style>
